<template>
<view class="value-switch-component" @click="toggle">
	<view :class="['container', {'selected': modelValue }]">
		<view class="circle"></view>
	</view>
</view>
</template>

<script>
export default {
	name: "value",
	props: {
		modelValue: {
			type: Boolean,
		}
	},
	emits: ["update:modelValue"],
	methods: {
		toggle () {
			this.$emit("update:modelValue", !this.modelValue)
		}
	}
}
</script>

<style lang="less">
.value-switch-component {
	width: 90rpx;
	height: 44rpx;
	
	.container {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #EEEEEE;
		border-radius: 239rpx;
		transition: .1s;
		
		.circle {
			position: absolute;
			z-index: 5;
			left: 4rpx;
			width: 36rpx;
			height: 36rpx;
			border-radius: 100%;
			background: #FFFFFF;
			transition: .3s;
		}
	}
	
	.selected {
		background: #FF6D03;
		
		.circle {
			transform: translateX(47rpx);
		}
	}
}
</style>